<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:head>

    </h:head>
    <h:body>
        <h:form id="form" >
            <!--<p:link outcome="garden" value="garden"/>-->
            <p:commandLink action="#{loginBean.logout()}" value="logout"/>

            <p:growl id="messages" showDetail="true" />

            <h:panelGrid columnClasses="value">
                <!--<h3 style="margin-top: 0">Editable Schedule</h3>-->

                <p:schedule id="schedule" value="#{scheduleViewBean.eventModel}" widgetVar="myschedule" timeZone="GMT+1">

                    <p:ajax event="dateSelect" listener="#{eventBean.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                    <p:ajax event="eventSelect" listener="#{eventBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />

                </p:schedule>

                <p:commandButton id="notifications" value="Notifications" update=":form:carouselInvitations:panelInvitations" actionListener="#{carouselView.loadInvitations()}" process="@this" oncomplete="PF('notificationDialog').show();" />
                <p:commandButton id="BWNotifications" value="Bad Weather Notification" update=":form:carouselBadWeather:panelBadWeather"  process="@this" oncomplete="PF('BadWeatherDialog').show();" />
            </h:panelGrid>


            <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                <h:panelGrid id="eventDetails" columns="2">
                    <h:outputLabel for="title" value="Title:" />
                    <p:inputText disabled="#{!eventBean.canModify}" id="title" value="#{eventBean.event.title}" required="true" >
                        <p:ajax update="title"/>
                    </p:inputText>

                    <h:outputLabel for="from" value="From:" />
                    <p:inputMask disabled="#{!eventBean.canModify}" id="from" value="#{eventBean.event.startDate}" mask="99/99/9999" required="true">
                        <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
                        <p:ajax update="from"/>
                    </p:inputMask>
                    
                    <h:outputLabel for="fromh" value="Hour:" />
                    <p:inputMask disabled="#{!eventBean.canModify}" id="fromh"  value="#{eventBean.event.startH}" mask="99:99" required="true">
                        <f:convertDateTime pattern="HH:mm" timeZone="GMT+2" timeStyle="full"/>
                        <p:ajax update="fromh"/>
                    </p:inputMask>

                    <h:outputLabel for="to" value="To:" />
                    <p:inputMask disabled="#{!eventBean.canModify}" id="to" value="#{eventBean.event.endDate}" mask="99/99/9999" required="true">
                        <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
                        <p:ajax update="to"/>
                    </p:inputMask>
                    
                    <h:outputLabel for="toh" value="Hour:" />
                    <p:inputMask disabled="#{!eventBean.canModify}" id="toh" value="#{eventBean.event.endH}" mask="99:99" required="true">
                        <f:convertDateTime pattern="HH:mm" timeZone="GMT+2"/>
                        <p:ajax update="toh"/>
                    </p:inputMask>

                    <h:outputLabel for="locationCity" value="City:" />
                    <p:inputText disabled="#{!eventBean.canModify}" id="locationCity" value="#{eventBean.event.location.city}" required="true" >
                        <p:ajax update="locationCity"/>
                    </p:inputText>

                    <h:outputLabel for="locationProvince" value="Province:" />
                    <p:inputText disabled="#{!eventBean.canModify}" id="locationProvince" value="#{eventBean.event.location.province}" required="true" >
                        <p:ajax update="locationProvince"/>
                    </p:inputText>

                    <h:outputLabel for="preference" value="Bad Weather Notification" />
                    <p:selectOneRadio disabled="#{!eventBean.canModify}" id="preference" value="#{eventBean.event.preference}">
                        <f:selectItem itemLabel="YES" itemValue="true" />
                        <f:selectItem itemLabel="NO" itemValue="false" />
                        <p:ajax update="preference"/>
                    </p:selectOneRadio>

                    <p:commandButton disabled="#{!eventBean.canModify}" id="addButton" value="Save" actionListener="#{eventBean.addEvent()}" action="#{scheduleViewBean.loadCalendar()}" process="@this" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
                    <p:commandButton disabled="#{!eventBean.canModify}" id="deleteButton" value="Delete" actionListener="#{eventBean.deleteEvent()}" action="#{scheduleViewBean.loadCalendar()}" process="@this" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
               

                <h:outputText value="Invite:" />
                <p:selectManyCheckbox id="usersGrid" value="#{eventBean.listUsers}" layout="grid" columns="3" disabled="#{!eventBean.canModify}">
            <f:selectItems value="#{eventBean.getListUsers()}" var="users" itemLabel="#{users.email}" itemValue="#{users}" />
        </p:selectManyCheckbox>
                
                </h:panelGrid>
            </p:dialog>
            
            
            
            <!--<p:dialog widgetVar="invitationDialog" header="Invitation Details" showEffect="clip" hideEffect="clip">
                <h:panelGrid id="invitationDetails" columns="2">
                    <h:outputText value="#{eventBean.um.loggedUsers.email}"/>
                    <h:outputLabel for="invitedEmail" value="Email:" />
                    <p:inputText id="invitedEmail" value="#{usersEventBean.invitedEmail}" required="true" >
                        <p:ajax update="invitedEmail"/>
                    </p:inputText>
                </h:panelGrid>
            </p:dialog>-->

            <p:dialog widgetVar="notificationDialog" id="carouselDialog" width="800px" height="300px" header="Notification List" showEffect="clip" hideEffect="clip">  
                <p:carousel value="#{carouselView.events}" id="carouselInvitations" numVisible="1" itemStyle="width:750px;height:200px" headerText="Notifications" var="eventCarousel">
                    <p:tab>
                        <p:panelGrid id="panelInvitations" columns="2" columnClasses="label,value">
                        
                        <h:outputText value="Title:" />
                        <h:outputText value="#{eventCarousel.title}"/>

                        <h:outputText value="Start Date:" />
                        <h:outputText value="#{eventCarousel.startDate}"/>

                        <h:outputText value="End Date" />
                        <h:outputText value="#{eventCarousel.endDate}"/>

                        <h:outputText value="City" />
                        <h:outputText value="#{eventCarousel.location.city}"/>
                      
                      <p:commandButton id="accept" value="Accept" action="#{usersEventBean.acceptInvitation(eventCarousel)}" process="@this"/>
                      <p:commandButton id="decline" value="Decline" action="#{usersEventBean.declineInvitation(eventCarousel)}" process="@this" />
                 
                    </p:panelGrid>
                        
                    </p:tab>
            </p:carousel>
            </p:dialog>
            
            <p:dialog widgetVar="BadWeatherDialog" id="carouselBadDialog" width="800px" height="300px" header="Bad Weather Notification List" showEffect="clip" hideEffect="clip">  
                <p:carousel value="#{badCarouselView.notifications}" id="carouselBadWeather" numVisible="1" itemStyle="width:750px;height:200px" headerText="Bad Weather Notifications" var="BadCarousel">
                    <p:tab>
                        <p:panelGrid id="panelBadWeather" columns="2" columnClasses="label,value">
                        
                        <h:outputText value="Title:" />
                        <h:outputText value="#{BadCarousel.title}"/>
                           
                        
                      
                    </p:panelGrid>
                        
                    </p:tab>
            </p:carousel>
            </p:dialog>

        </h:form>

        <style type="text/css">
            .value {
                width: 1000px;
            }
        </style>
    </h:body>


</html>